﻿@model HomeCareLibrary.Models.UserDetailIDModel

<div class="col-lg-9 col-sm-9 right_part">
    <div class="personalization-page personalization-mainpage">
        <div class="flipbox-container box100">
            <div id="flipboxnew" class="flipboxnew"></div>
            <div id="flipbox" class="flipbox">
                <div class="title clearfix">
                    <h1>Personalization</h1>
                    <div class="top-btn-per clearfix">
                        <div id="back-button" class="back-button">
                            <a href="#">
                                <img id="btnBack" class="back-btn" alt="back-btn" src="@Url.Content("~/images/personalization-images/back-btn.png")">
                             <div class="back-mob-btn">
                                 <span class="glyphicon glyphicon-chevron-left"></span> Back
                                 </div>
                            </a>
                        </div>
                        <div class="ques-button">
                            <a href="javascript:void(0);">
                                <img class="ques-bt" src="@Url.Content("~/images/personalization-images/ques-btn.png")" alt="ques-btn">
                                <img class="mobques-bt" src="@Url.Content("~/images/personalization-images/mobques-btn.png")" alt="ques-btn">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="main-content">
                    <div class="personalization-content">
                        <div class="personalization-bg">
                            @*Form Start*@

                            @using (Html.BeginForm("UpdateAllPersonalization", "Personalization", FormMethod.Post, new { id = "UpdateAllPersonalizationForm" }))
                            {
                                
                                <div class="personalization-inn">
                                    <div data-ride="carousel" class="carousel slide" id="carousel-example-captions">
                                        <div class="carousel-indicators-fixed-m">
                                            <div class="carousel-indicators-top">
                                                <ol class="carousel-indicators">
                                                    <li id="carousel-example-captions1" class="active" data-slide-to="0" data-target="#carousel-example-captions"></li>
                                                    <li data-slide-to="1" data-target="#carousel-example-captions" class="carousel-example-hide"></li>
                                                    <li data-slide-to="2" data-target="#carousel-example-captions" class="carousel-example-hide"></li>
                                                    <li data-slide-to="3" data-target="#carousel-example-captions" class="carousel-example-hide"></li>
                                                    <li data-slide-to="4" data-target="#carousel-example-captions" class="carousel-example-hide"></li>
                                                    <li data-slide-to="5" data-target="#carousel-example-captions" class="carousel-example-hide"></li>
                                                    <li data-slide-to="6" data-target="#carousel-example-captions" class="carousel-example-hide"></li>

                                                </ol>
                                                <a data-slide="prev" id="prev" href="#carousel-example-captions" class="left carousel-control carousel-example-show1">
                                                    <!-- <img src="images/personalization-images/previous-btn.png" alt="previous-btn">-->
                                                </a><a data-slide="next" id="next" href="#carousel-example-captions" class="right carousel-control carousel-example-hide1">

                                                    <!--<img src="images/personalization-images/next-btn.png" alt="next-btn">-->
                                                </a>
                                                 <a data-slide="finish" id="finish" style="display:none"  href="#" class="finish carousel-control"></a>
                                             
                                               
                                            </div>
                                        </div>
                                        <div class="carousel-inner">

                                           

                                            <div class="item active">
                                                <div class="personalization-data Dwelling-part-data">
                                                    <h3 class="personalization-heading">Dwelling Type</h3>
                                                     <input type="hidden" id="refreshed" value="no">
                                                    
                                                     @Html.HiddenFor(m => m.dwelling_type)
                                                     @Html.HiddenFor(m => m.user_id)
                                            @Html.HiddenFor(m => m.home_number)
                                                    <p class="top-data">Your personalized home care program is calculated based on the type of dewelling you have.</p>

                                                    <div class="Dwelling-part">
                                                        <div class="form-per">
                                                            <form role="form">
                                                                <div class="form-group">
                                                                    <label for="dwellingtype">Select your dwelling type:</label>


                                                                    @Html.DropDownList("getDwellingType", null, new { @class = "form-control" })
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="createname">Create a name for this home:</label>

                                                                    @Html.TextBoxFor(m => m.home_name, new { @class = "form-control" })
                                                                </div>
                                                            </form>
                                                        </div>

                                                        <p class="text-center btm-dwelling-img">

                                                            @if (Model.welcome_image == null)
                                                            {
                                                                <img class="img-responsive" src="@Url.Content("~/images/personalization-images/dwelling-img.png")" alt="dwelling-img">
                                                            }
                                                            else
                                                            {
                                                                <img class="img-responsive" src='@Model.welcome_image' alt="dwelling-img">
                                                            }

                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <div class="personalization-data home-features-data">
                                                    @Html.HiddenFor(m => m.featurestring)
                                                    <h3 class="personalization-heading">Home Features</h3>
                                                    <p class="home-pages-txt">
                                                        When you open each of the six section below,
you can put a checkmark for each feature that
applies to your particular home.
                                                    </p>
                                                    <p class="top-data">
                                                        Your choices will be included in the calculation
of your personalized home care program.
                                                    </p>


                                                    <div class="feature-tab">
                                                        <div class="hcl-tab">
                                                            <div class="panel-group" id="accordion">


                                                                @foreach (var Mainitem in Model.listCategory)
                                                                {
                                                                    <div class="panel panel-default">
                                                                        <div class="panel-heading">
                                                                            <h4 class="panel-title"><a class="accordion-toggle collapsed clickAnimation" data-toggle="collapse" data-parent="#accordion" href="#@Mainitem.HomeCare_Category.Substring(0, 4)">@Mainitem.HomeCare_Category

                                                                            </a>

                                                                            </h4>
                                                                        </div>
                                                                        <div style="height: 0px;overflow:scroll" id="@Mainitem.HomeCare_Category.Substring(0, 4)" class="panel-collapse collapse animationClass">
                                                                           <div  class="heading clearfix" ><span class="headerText">  </span>
                                    <a class="IconClose" href="javascript:void(0)"> <img data-name="@Mainitem.HomeCare_Category.Substring(0, 4)"  class="clickClose" alt="" src="@Url.Content("~/images/hcltab-arrow-open.png")"> </a>
                                    <a class="closeBTN" href="javascript:void(0)"> <img data-name="@Mainitem.HomeCare_Category.Substring(0, 4)"  class="clickClose" alt="" src="@Url.Content("~/images/personalization-images/close-animation.png")"> </a></div>
                                                                              <div class="panel-body nopadding data-inner">
                                                                                <div id="accordion-inn-Heating" class="panel-group">

                                                                                    @foreach (var item in Model.listCategoryTags)
                                                                                    {
                                                                                        if (Mainitem.ID == item.CategoryID)
                                                                                        {
                                                                                        <div class="panel panel-default">
                                                                                            <div class="panel-heading">
                                                                                                <h4 class="panel-title checkbox">
                                                                                                    <label>
                                                                                                    <input  type="checkbox" name="checkmarkedChecked" value="" data-featurecode="'@item.Feature_code'" class="markedChecked">
                                                                                                 @item.Feature_Name
                                                                                                        </label>
                                                                                                    <a href="#hbac1" data-name="@item.Feature_code" data-parent="#accordion-inn-Heating" data-toggle="collapse" class="accordion-toggle collapsed btn-left"></a></h4>
                                                                                            </div>
                                                                                            <div class="panel-collapse collapse" id="@(Mainitem.HomeCare_Category.Substring(0, 4) + item.Feature_code)" style="height: auto;">
                                                                                              
                                                                                            </div>
                                                                                        </div>
                                                                                        }
                                                                                    }

                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                }

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <div class="personalization-data local-climate-data">
                                                    <h3 class="personalization-heading">Local Climate</h3>
                                                    @Html.HiddenFor(model => model.ps_country)
                                                    @Html.HiddenFor(model => model.ps_state_province)
                                                    <p class="top-data">
                                                        Your personalized program is adjusted for the climate, timing of seasons, 
                              length of seasons, etc. for where you live.
                                                    </p>
                                                    <div class="Dwelling-part">
                                                        <div class="form-per">
                                                            <form role="form">
                                                                <div class="form-group">
                                                                    <label for="country">Country:</label>

                                                                    @Html.DropDownList("Country", null, new { @class = "form-control" })
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="state">State/Province:</label>

                                                                    @Html.DropDownList("State", @ViewData["optional"].ToString())
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="item">

                                                <div class="personalization-data goal-data-per">
                                                    <h3 class="personalization-heading">Goals</h3>
                                                    @Html.HiddenFor(model => model.ps_goal_string)

                                                    <p class="top-data">
                                                        Your personalized home care program is customized for you based 
                              on your selected goals and the importance that you put on them.
                                                    </p>

                                                    <div class="goal-selected">
                                                        <ul class="list-unstyled list-inline">
                                                            <li class="top-goal">
                                                                <div class="radio">
                                                                    <label>
                                                                        <input type="radio" value="option21" id="optionsRadios2o" name="optionsRadios1" checked="true">
                                                                        One of my Top Goals
                                                                    </label>
                                                                </div>
                                                            </li>
                                                            <li class="secondary-goal">
                                                                <div class="radio">
                                                                    <label>
                                                                        <input type="radio" value="option22" id="optionsRadios2s" name="optionsRadios2" checked="true">
                                                                        Secondary Goals
                                                                    </label>
                                                                </div>
                                                            </li>
                                                            <li class="not-for-goal">
                                                                <div class="radio">
                                                                    <label>
                                                                        <input type="radio" value="option23" id="optionsRadios2n" name="optionsRadios3" checked="true">
                                                                        Not one of my Goals
                                                                    </label>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                    <div class="goal-data">
                                                        <div class="goaltable">
                                                            <table class="table table-striped">
                                                                <tbody>
                                                                    <tr class="Goalcheck">
                                                                        <td width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="1" id="" name="radio"></td>
                                                                        <td class="secondary-goal" width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="2" id="" name="radio"></td>
                                                                        <td class="not-for-goal" width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="0" id="" name="radio"></td>
                                                                        <td>Energy Savings</td>
                                                                    </tr>
                                                                    <tr class="Goalcheck">
                                                                        <td width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="1" id="" name="radio1"></td>
                                                                        <td class="secondary-goal" width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="2" id="" name="radio1"></td>
                                                                        <td class="not-for-goal" width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="0" id="" name="radio1"></td>
                                                                        <td>Health & Safety</td>
                                                                    </tr>
                                                                    <tr class="Goalcheck">
                                                                        <td width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="1" id="" name="radio2"></td>
                                                                        <td class="secondary-goal" width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="2" id="" name="radio2"></td>
                                                                        <td class="not-for-goal" width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="0" id="" name="radio2"></td>
                                                                        <td>Avoiding Unscheduled Repairs</td>
                                                                    </tr>
                                                                    <tr class="Goalcheck">
                                                                        <td width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="1" id="" name="radio3"></td>
                                                                        <td class="secondary-goal" width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="2" id="" name="radio3"></td>
                                                                        <td class="not-for-goal" width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="0" id="" name="radio3"></td>
                                                                        <td>Comfort & Convenience</td>
                                                                    </tr>
                                                                    <tr class="Goalcheck">
                                                                        <td width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="1" id="" name="radio4"></td>
                                                                        <td class="secondary-goal" width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="2" id="" name="radio4"></td>
                                                                        <td class="not-for-goal" width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="0" id="" name="radio4"></td>
                                                                        <td>Maintaining Value</td>
                                                                    </tr>
                                                                    <tr class="Goalcheck">
                                                                        <td width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="1" id="" name="radio5"></td>
                                                                        <td class="secondary-goal" width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="2" id="" name="radio5"></td>
                                                                        <td class="not-for-goal" width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="0" id="" name="radio5"></td>
                                                                        <td>Appearance</td>
                                                                    </tr>
                                                                    <tr class="Goalcheck">
                                                                        <td width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="1" id="" name="radio6"></td>
                                                                        <td class="secondary-goal" width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="2" id="" name="radio6"></td>
                                                                        <td class="not-for-goal" width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="0" id="" name="radio6"></td>
                                                                        <td>Green <small>(saving water & recycling)</small></td>
                                                                    </tr>
                                                                    <tr class="Goalcheck">
                                                                        <td width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="1" id="" name="radio7"></td>
                                                                        <td class="secondary-goal" width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="2" id="" name="radio7"></td>
                                                                        <td class="not-for-goal" width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="0" id="" name="radio7"></td>
                                                                        <td>Saving Money <small>(beyond energy)</small></td>
                                                                    </tr>
                                                                    <tr class="Goalcheck">
                                                                        <td width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="1" id="" name="radio8"></td>
                                                                        <td class="secondary-goal" width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="2" id="" name="radio8"></td>
                                                                        <td class="not-for-goal" width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="0" id="" name="radio8"></td>
                                                                        <td>Space Management <small>(including decluttering)</small></td>
                                                                    </tr>
                                                                    <tr class="Goalcheck">
                                                                        <td width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="1" id="" name="radio9"></td>
                                                                        <td class="secondary-goal" width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="2" id="" name="radio9"></td>
                                                                        <td class="not-for-goal" width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="0" id="" name="radio9"></td>
                                                                        <td>Allergy Control</td>
                                                                    </tr>
                                                                    <tr class="Goalcheck">
                                                                        <td width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="1" id="" name="radio11"></td>
                                                                        <td class="secondary-goal" width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="2" id="" name="radio11"></td>
                                                                        <td class="not-for-goal" width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="0" id="" name="radio11"></td>
                                                                        <td>Child Safety</td>
                                                                    </tr>
                                                                    <tr class="Goalcheck">
                                                                        <td width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="1" id="" name="radio12"></td>
                                                                        <td class="secondary-goal" width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="2" id="" name="radio12"></td>
                                                                        <td class="not-for-goal" width="45px;">
                                                                            <input class="insideGoalcheck" type="radio" value="0" id="" name="radio12"></td>
                                                                        <td>Senior Safety</td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <div class="personalization-data knowledge-data-outer">
                                                    <h3 class="personalization-heading">Knowledge Level</h3>
                                                    @Html.HiddenFor(m => m.ps_knowledge_level)
                                                    <p class="top-data">
                                                        Select the knowledge level that best applies to you, 
                              so that your home care program will match with your needs.
                                                    </p>
                                                    <div class="knowledge-data">
                                                        <ul class="list-unstyled">
                                                            <li>
                                                                <div class="checkbox">
                                                                    <label>
                                                                        <input type="checkbox" value="1" class="kndata">
                                                                        <strong>Just begining.</strong>
                                                                        <p>My tips should include even the most basic of suggestions.</p>
                                                                    </label>
                                                                </div>
                                                            </li>
                                                            <li class="knowledge-colorbg">
                                                                <div class="checkbox">
                                                                    <label>
                                                                        <input type="checkbox" value="2" class="kndata">
                                                                        <strong>Moderate knowledge.</strong>
                                                                        <p>My tips should include even the most basic of suggestions.</p>
                                                                    </label>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="checkbox">
                                                                    <label>
                                                                        <input type="checkbox" value="3" class="kndata">
                                                                        <strong>Very knowledgeable. </strong>
                                                                        <p>My tips only should be the most sophisticated ones.</p>
                                                                    </label>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <div class="personalization-data Priority-data-o">
                                                    <h3 class="personalization-heading">Priority</h3>
                                                    @Html.HiddenFor(m => m.ps_priority)
                                                    <p class="top-data">
                                                        The highest tasks & tips are the ones that have the highest benefits relative to their costs.
                              Select below the level of priority that you are interested in.
                                                    </p>
                                                    <div class="goal-data">
                                                        <div class="Priority-table-data">
                                                            <table class="table">
                                                                <tbody>
                                                                    <tr>
                                                                        <td>
                                                                            <div class="checkbox">
                                                                                <label>
                                                                                    <input type="checkbox" value="5" class="checkpriority">
                                                                                </label>
                                                                            </div>
                                                                        </td>
                                                                        <td width="100px;">
                                                                            <img src="@Url.Content("~/images/personalization-images/star1-per.png")"></td>
                                                                        <td>send me only 5 star priorities</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>
                                                                            <div class="checkbox">
                                                                                <label>
                                                                                    <input type="checkbox" value="4" class="checkpriority">
                                                                                </label>
                                                                            </div>
                                                                        </td>
                                                                        <td width="100px;">
                                                                            <img src="@Url.Content("~/images/personalization-images/star2-per.png")"></td>
                                                                        <td>send me only 4 star and higher</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>
                                                                            <div class="checkbox">
                                                                                <label>
                                                                                    <input type="checkbox" value="3" class="checkpriority">
                                                                                </label>
                                                                            </div>
                                                                        </td>
                                                                        <td width="100px;">
                                                                            <img src="@Url.Content("~/images/personalization-images/star3-per.png")"></td>
                                                                        <td>send me only 3 star and higher</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>
                                                                            <div class="checkbox">
                                                                                <label>
                                                                                    <input type="checkbox" value="2" class="checkpriority">
                                                                                </label>
                                                                            </div>
                                                                        </td>
                                                                        <td width="100px;">
                                                                            <img src="@Url.Content("~/images/personalization-images/star4-per.png")"></td>
                                                                        <td>send me only 2 star and higher</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>
                                                                            <div class="checkbox">
                                                                                <label>
                                                                                    <input type="checkbox" value="1" class="checkpriority">
                                                                                </label>
                                                                            </div>
                                                                        </td>
                                                                        <td width="100px;">
                                                                            <img src="@Url.Content("~/images/personalization-images/star5-per.png")"></td>
                                                                        <td>send me all priorities</td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                        <p class="add-txt text-center">
                                                            To receive ALL task & tips
(not just the highest priorities)
then click the last choice.
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="item">

                                                <div class="personalization-data mobile-monthly-alert">
                                                    <h3 class="personalization-heading">Monthly Alert</h3>
                                                     @Html.HiddenFor(m => m.app_mo_alert_badge)
                                                     @Html.HiddenFor(m => m.app_mo_alert_popup)
                                                     @Html.HiddenFor(m => m.app_mo_alert_week)
                                                     @Html.HiddenFor(m => m.app_mo_alert_day)
                                                     @Html.HiddenFor(m => m.app_mo_alert_hour)
                                                    <p class="top-data">How do you want to be notified when your monthly personalized home care tasks &amp; tips are ready?</p>
                                                    <div class="Dwelling-part">
                                                        <div class="form-per">
                                                            <form role="form">
                                                                <div class="form-checkbox">
                                                                    <div class="checkbox">
                                                                        <label>
                                                                            <input type="checkbox" id="chkMob_BadgeAlert">
                                                                            Badge Alert
                                                                        </label>
                                                                    </div>
                                                                    <div class="checkbox">
                                                                        <label>
                                                                            <input type="checkbox" id="chkMob_PopupAlert">
                                                                            Pop-up
                                                                        </label>
                                                                    </div>

                                                                    @if(!String.IsNullOrEmpty(Model.web_mo_alert_email))
                                                                    {
                                                                    <div class="checkbox checkbox-email">
                                            <label>
                                              <input type="checkbox" id="chkweb_mo_alert_email">
                                              Email</label>
                                           @* <input type="text" placeholder="" class="form-control" id="createname">*@
                                             @Html.TextBoxFor(m => m.web_mo_alert_email, new { @id="moweb_mo_alert_email",@class = "form-control" })
                                          </div>
                                                                    }
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="country">Week of the month:</label>
                                                                 
                                                                    
                                                              @Html.DropDownList("getWeekoftheMonth", null, new { @class = "form-control" })
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="state">Day of the week:</label>
                                                                    @Html.DropDownList("getDayoftheWeek", null, new { @class = "form-control" })
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="state">Time of the day:</label>
                                                                  @Html.DropDownList("getTimeoftheDay", null, new { @class = "form-control" })
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                    <p class="monthly-alert-img add-txt">
                                                        This will apply to all of the homes that you setup.
                                                    </p>
                                                </div>

                                                <div class="personalization-data monthly-alert-data full-monthly-alert">
                                                    <h3 class="personalization-heading">Monthly Alert</h3>
                                                    <p class="top-data">
                                                        How do you want to be notified when your monthly personalized 
                              home care tasks & tips are ready?
                                                    </p>
                                                    <div class="clearfix monthly-alert-panel-outer">
                                                        <div class="monthly-alert-panel clearfix">
                                                            <div class="pull-left icon-left"></div>
                                                            <div class="pull-left middle-txt"><span>Faceboo</span>k</div>
                                                            <div class="right-img col-md-8">
                                                                <img src="@Url.Content("~/images/personalization-images/facebook-icon.png")" alt="facebook-icon"></div>
                                                        </div>
                                                        <div class="monthly-alert-panel clearfix">
                                                            <div class="pull-left icon-left"></div>
                                                            <div class="pull-left middle-txt"><span>Twitter</span></div>
                                                            <div class="right-img col-md-8">
                                                                <img src="@Url.Content("~/images/personalization-images/twitter-icon.png")" alt="twitter-icon"></div>
                                                        </div>
                                                        <div class="monthly-alert-panel clearfix">
                                                            <div class="pull-left icon-left">
                                                             <input type="checkbox" id="chkemail" />
                                                            </div>
                                                            <div class="pull-left middle-txt"><span>Email</span></div>
                                                            <div class="right-img col-md-8">
                                                                @*  <input class="input-box col-md-4 form-control" type="text" placeholder="" id="email">*@
                                                            
                                                                @Html.TextBoxFor(m => m.web_mo_alert_email, new { @class = "input-box col-md-4 form-control" })
                                                                 
                                                            </div>
                                                        </div>
                                                        <div class="monthly-alert-panel clearfix">
                                                            <div class="last-alert-panel clearfix">
                                                                <div class="pull-left icon-left">
                                                                       <input type="checkbox" id="chkNoAlert" /></div>
                                                                <div class="pull-left middle-txt"><span>No alerts</span></div>
                                                                <div class="right-img col-md-8">
                                                                    <p>
                                                                        I will use my own calendar app to send me monthly alerts<br>
                                                                        (Google Calendar, Remember the Milk, Reminder Fox, etc.)
                                                                    </p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- <p class="monthly-alert-img"><img class="img-responsive" src="images/personalization-images/monthly-alert-img.png" alt="monthly-alert-img"></p>-->
                                                   
                                                </div>
                                            </div>





                                        </div>
                                    </div>
                                </div>
@*Form End*@
                            }
                        </div>
                    </div>
                </div>
            </div>


             
        </div>
    </div>
</div>
@section script {

    <script src="@Url.Content("~/js/carousel.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/js/jquery.icheck.min.js")" type="text/javascript"></script>

   <script>


        jQuery(document).ready(function () {
            jQuery(window).load(function () {
                jQuery("#bodydesk").css('visibility', 'visible');

            });
            $("#State").addClass("form-control");
            checkedCheckonbasedoffeatureString();
            checkedgoals();
            checkKnowledgeLevel();
            checkpriority();
            checkMonthlyAlert();

            AppMonthlyAlerts();

        });

        function AppMonthlyAlerts()
        {
            
            if ($("#app_mo_alert_badge").val() != '') {
                $("#chkMob_BadgeAlert").attr('checked',true);
            }
            else
            {
                $("#chkMob_BadgeAlert").attr('checked', false);
            }
            if ($("#app_mo_alert_popup").val() != '') {
                $("#chkMob_PopupAlert").attr('checked', true);
            }
            else {
                $("#chkMob_PopupAlert").attr('checked', false);
            }
        }

        $("#finish").click(function () {
            if ($("#chkemail").is(':checked') && $("#web_mo_alert_email").val() == '') {
                 alert("You must enter the email.");
             }
            else {

                $("#UpdateAllPersonalizationForm").submit();
            }
        });


        function checkMonthlyAlert()
        {

            if ($("#web_mo_alert_email").val() == '') {
                $("#chkemail").attr('checked', false);
                $("#chkNoAlert").attr('checked', true);
            }
            else {
                $("#chkemail").attr('checked', true);
                $("#chkNoAlert").attr('checked', false);
            }


            if ($("#moweb_mo_alert_email").val() == '') {
                $("#chkweb_mo_alert_email").attr('checked', false);
            }
            else
            {
                $("#chkweb_mo_alert_email").attr('checked', true);
            }
        }

        //GOALS
        function checkedgoals() {
            var getGoaldata = $('#ps_goal_string').val();
            var arrofgetFeaturedata = getGoaldata.split(',');
            if (arrofgetFeaturedata != '') {
                $(".Goalcheck").each(function (indexTop) {

                    $(this).find('.insideGoalcheck').each(function (index) {
                        if ($(this).val() == arrofgetFeaturedata[indexTop]) {
                            $(this).attr('checked', true);

                        }
                    });
                });
            }

        }

        $('input').on('ifChecked', function (event) {

            var getString = "";
            var FinalgetString = "";
            $(".Goalcheck").each(function (indexTop) {

                $(this).find('.insideGoalcheck').each(function (index) {
                    if ($(this).is(':checked')) {
                        getString = $(this).val();
                    }
                });
                FinalgetString = FinalgetString + getString + ",";
            });
            $("#ps_goal_string").val(FinalgetString.slice(0, -1));
        });

        //Knowledge Level
        function checkKnowledgeLevel() {
            $(".knowledge-data").find('.kndata').each(function (index) {

                if ($(this).val() == $("#ps_knowledge_level").val()) {
                    $(this).attr('checked', true);

                }
            });
        }

        $(".kndata").change(function () {
            $(".knowledge-data").find('.kndata').each(function (index) {
                $(this).attr('checked', false);
            });
            $(this).attr('checked', true);
            $("#ps_knowledge_level").val($(this).val());
        });

        //Priority
        function checkpriority() {
            $(".checkpriority").each(function (index) {

                if ($(this).val() == $("#ps_priority").val()) {
                    $(this).attr('checked', true);

                }
            });
        }

        $(".checkpriority").change(function () {
            $(".checkpriority").each(function (index) {
                $(this).attr('checked', false);
            });
            $(this).attr('checked', true);
            $("#ps_priority").val($(this).val());
        });



        function checkedCheckonbasedoffeatureString() {
            //We have to checked the checkboxes on based of feature string on page load.
            var getFeaturedata = $('#featurestring').val();
            var arrofgetFeaturedata = getFeaturedata.split(',');

            if (arrofgetFeaturedata != '') {


                $(".markedChecked").each(function (index) {
                    var i;
                    for (i = 0; i < arrofgetFeaturedata.length; ++i) {
                        $(this).attr('checked', false);
                    }
                });



                $(".markedChecked").each(function (index) {
                    var i;

                    for (i = 0; i < arrofgetFeaturedata.length; ++i) {

                        if ($(this).attr('data-featurecode') == arrofgetFeaturedata[i]) {
                            $(this).attr('checked', true);
                        }
                    }
                });
            }
        }


        //We need to update featurecode string on based of user selection of checkboxes.
        $(".markedChecked").change(function () {
            checkedAddInString();
        });


        function checkedAddInString() {
            var getFeatureString = "";
            $(".markedChecked").each(function (index) {
                var i;
                // values of checkbox checked here
                if ($(this).is(':checked')) {
                    getFeatureString = getFeatureString + $(this).attr('data-featurecode') + ',';
                }
            });
            var finalGetFeatureString = getFeatureString.slice(0, -1);
            $("#featurestring").val(finalGetFeatureString);
        }

        //On change of dwelling type we need to change the value of feature string to default values instead of feature string return from database.
        // so, make an ajax call and save value in session that user changed the dwelling type.
        $("#getDwellingType").live("change", function (e) {
        //$("#getDwellingType").change(function () {


            if (confirm('You have changed your Dwelling Type, so you will need to re-check your Home Features')) {

                var DselectedItem = "";
                DselectedItem = $(this).val();
                $("#dwelling_type").val(DselectedItem);
                $.ajax({
                    type: "GET",
                    data: { id: $(this).val() },
                    url: "Personalization/ChangeDwellingType",
                    success: function (msg) {

                        $("#featurestring").val(msg);
                        checkedCheckonbasedoffeatureString();
                        // alert("You have changed your Dwelling Type, so you will need to re-check your Home Features");
                        $("#dwelling_type").val(DselectedItem);
                    }
                });
            }
            else {
                $("#getDwellingType").val('@Model.dwelling_type');
             }
        });







        //Country State
        $("#Country").live("change", function (e) {

            var selectedItem = $(this).val();
            $("#ps_country").val(selectedItem);
            $("#ps_state_province").val("");
            var ddlStates = $("#State");

            $.ajax({
                cache: false,
                type: "GET",
                url: "@(Url.Action("getStatesbyCountry", "Personalization"))",
             data: { "country": selectedItem },
             success: function (data) {
                 ddlStates.html('');

                 if (selectedItem == "US") {
                     ddlStates.append($('<option></option>').val("").html("-Select state or region-"));
                 }
                 else if (selectedItem == "CAN") {
                     ddlStates.append($('<option></option>').val("").html("-Select Province-"));
                 }


                 $.each(data, function (id, option) {
                     ddlStates.append($('<option></option>').val(option.id).html(option.name));
                 });

             },
             error: function (xhr, ajaxOptions, thrownError) {
                 alert('Failed to retrieve states.');

             }
         });
     });


     $("#State").live("change", function (e) {

         $("#ps_state_province").val($(this).val());
     });


       
     $("#getWeekoftheMonth").live("change", function (e) {
         var selectedItem = $(this).val();
         $("#app_mo_alert_week").val(selectedItem);
     });
     $("#getDayoftheWeek").live("change", function (e) {
         var selectedItem = $(this).val();
         $("#app_mo_alert_day").val(selectedItem);
     });
     $("#getTimeoftheDay").live("change", function (e) {
         var selectedItem = $(this).val();
         $("#app_mo_alert_hour").val(selectedItem);
     });


     //Goals




    </script>
    <script>
        $('.carousel').carousel({
            interval: 2000000
        })
    </script>

    <script>
        $(document).ready(function () {
            $('input[type="radio"]').iCheck({
                checkboxClass: 'icheckbox_futurico',
                radioClass: 'iradio_futurico',
                increaseArea: '20%' // optional
            });
            $(".carousel-example-hide").click(function () {

                var returnValue = Validations();
                if (returnValue == "false") {
                    return false;
                }
                else {
                   

                    $(".back-button").hide();
                    var currentvalue = $(this).attr('data-slide-to');
                    $(".carousel-indicators li").each(function (index) {
                        $(this).removeClass('active1');

                    });
                    $(".carousel-indicators li").each(function (index) {

                        if ($(this).attr('data-slide-to') <= currentvalue) {
                            if (currentvalue == 6) {
                                $("#next").css("display", "none");
                                $("#finish").css("display", "block");
                            }
                            else {
                                $("#next").css("display", "block");
                                $("#finish").css("display", "none");

                            }
                            $(this).addClass('active1');
                        }

                    });

                    $("#back-button").hide();
                }
            });

            $("#carousel-example-captions1").click(function () {
               
                var currentvalue = $(this).attr('data-slide-to');

                $(".carousel-indicators li").each(function (index) {
                    $(this).removeClass('active1');

                });
                $(".carousel-indicators li").each(function (index) {

                    if ($(this).attr('data-slide-to') <= currentvalue) {
                        $(this).addClass('active1');
                    }
                });

                $(".back-button").show();
            });

            $("#btnBack").click(function () {
                window.history.back();
            });





            //Validations

            function Validations() {
                var finalReturnString = "true";

                //check the validations for Local Climate Country State
                if (($("#State option:selected").val() == "") && ($("#Country option:selected").val() == "US")) {

                    alert("You must select a state or region.");
                    finalReturnString = "false";
                }
                if (($("#State option:selected").val() == "") && ($("#Country option:selected").val() == "CAN")) {
                    alert("You must select a province.");
                    finalReturnString = "false";
                }

                //check the validation for goals, if user not selected right show alert message and return false
                if ($("#ps_goal_string").val() == '0,0,0,0,0,0,0,0,0,0,0,0') {
                    alert("You must select at least one goal as either a Top Or Secondary goal.");
                    finalReturnString = "false";
                }

             

                 return finalReturnString;

            }


            var $first = $('li:first', 'ol'),
             $last = $('li:last', 'ol');
             //Have the first and last li's set to a variable
            //$("#next").live("click", function (e) {
            $("#next").click(function () {
              
                var returnValue = Validations();
                if (returnValue == "false") {
                    return false;
                }
                else {

                    $(".back-button").hide();
                    var $next,
                        $selected = $(".active");
                    
                     //get the selected item
                    // If next li is empty , get the first
                    $next = $selected.next('li').length ? $selected.next('li') : $first;
                    
                    $selected.addClass("active1");
                    $next.addClass('active');


                    if ($last.hasClass('active')) {
                        $("#next").css("display", "none");
                        $("#finish").css("display", "block");
                    }
                    else {
                        $("#next").css("display", "block");
                        $("#finish").css("display", "none");
                    }

                }


            });

            $("#prev").click(function () {
                $first.next('li')
                var $prev,
                    $selected = $(".active");
                // get the selected item
                // If prev li is empty , get the last
                if ($selected.prev('li').prev('li').length == 0) {

                    $(".back-button").show();
                }
                if ($selected.prev('li').length != 0) {
                    $prev = $selected.prev('li').length ? $selected.prev('li') : $last;

                    $selected.removeClass("active1");



                    if ($last.hasClass('active1')) {
                        $("#next").css("display", "none");
                        $("#finish").css("display", "block");
                    }
                    else {
                        $("#next").css("display", "block");
                        $("#finish").css("display", "none");
                    }
                }
                else {

                    return false;
                }


            });

        });


        $("#chkNoAlert").live("click", function (e) {
            //If user checks “No Alerts” then delete email from textbox (and in the database), and  change “No Alerts”   radio button to active
          
            if ($(this).is(':checked')) {
                //Database ping to delete it.
                var ID = "@Model.user_id";
                //updateAlerts(ID, '');
                $("#web_mo_alert_email").val('');
                $("#chkemail").attr('checked', false);
            }
            else {
                $("#chkemail").attr('checked', true);
            }
         });

          function updateAlerts(ID, Email)
        {
        
            if (ID != '') {
                    $.ajax({
                    cache: false,
                    type: "POST",
                    url: "@(Url.Action("UpdateAlerts", "Personalization"))",
                    data: { 'id': ID, 'email':Email },
                    success: function (data) {
                        if (data == 2)
                        {
                            alert("Please enter valid email.");
                        }

                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert('Failed to update data.');

                        }
                    });
                }
        }

        $("#chkemail").live("click", function (e) {

            if ($(this).is(':checked')) {

                $("#chkNoAlert").attr('checked', false);
            }
            else
            {
                $("#chkNoAlert").attr('checked', true);
                $("#web_mo_alert_email").val('');
            }
           
        });

        $("#web_mo_alert_email").live("keypress", function (e) {
          
            //If user starts to type in email textbox,then radio button for “Email” becomes active
            $("#chkemail").attr('checked', true);
            $("#chkNoAlert").attr('checked', false);
        });


        $('#web_mo_alert_email').keyup(function(e){
                    if (e.which == 8 && this.value.length == 0)
                    {
                        $("#chkemail").attr('checked', false);
                        $("#chkNoAlert").attr('checked', true);
                    } 
             }); 

        $("#web_mo_alert_email").live("blur", function (e) {
          
               //check that email format  is correct
             if ($(this).val() != '') {
                 var returnValue = isValidEmailAddress($(this).val());
                 if (returnValue == false)
                 {
                     alert("Email address is not in the proper format for a valid email address.");
                 }
            }
        });

        function isValidEmailAddress(emailAddress) {
            var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
            return pattern.test(emailAddress);
        }

        $("#chkMob_BadgeAlert").live("click", function (e) {

            if ($(this).is(':checked')) {

                $("#app_mo_alert_badge").val(1);
            }
            else {
                $("#app_mo_alert_badge").val(0);
            }

        });

        $("#chkMob_PopupAlert").live("click", function (e) {

            if ($(this).is(':checked')) {

                $("#app_mo_alert_popup").val(1);
            }
            else {
                $("#app_mo_alert_popup").val(0);
            }

        });

         // For Flip
         $(".btn-left").live("click", function (e) {
             
             var ID = $(this).attr("data-name");
             var div = "";
             //cache: false,
             $.ajax({
            
            type: "GET",
            url: "@(Url.Action("featureDetail", "Personalization"))",
                 data: { 'id': ID },
                success: function (data) {
                   
                    $(".flipboxnew").flippy({

                        direction: "left",
                        duration: "500",
                        verso: data,
                        onFinish: function () {
                            window.scrollTo(0, 0);
                        },
                        onReverseFinish: function () {
                            $(".flipbox").show();
                        }
                    });

                    $(".flipbox").hide();
                    e.preventDefault();
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert('Failed to retrieve data.');

                }
         });

         });
   </script>

    <script type="text/javascript">
        $(function () {
            $(".clickAnimation").live("click", function () {
                var getheaderText=$(this).text();
                $(".headerText").html(getheaderText);
                var gettheCurrentHref = $(this).attr('href');
                $(gettheCurrentHref).css("display", "block");
                do_Animation(gettheCurrentHref);

                //Disable the help icon Image Over the Top
                $(".ques-bt").attr('disabled', true);
                $(".ques-bt").css({ cursor: "default" });
            })
            $(".clickClose").live("click", function () {
                
                var getname = $(this).attr('data-name');
                $('#' + getname).animate({ left: 0, height: 0 }, 1000);
                //Enable the help icon Image Over the Top
                $(".ques-bt").attr('disabled', false);
                $(".ques-bt").css({ cursor: "pointer" });
            })
        });

        function do_Animation(gettheCurrentHref) {


            var $window = $(window);
            var windowsize = $window.width();
           
            if (windowsize < 767) {
                $(gettheCurrentHref).animate({ left: 0, height: 435 }, 1000);
            }
            else {
                $(gettheCurrentHref).animate({ left: 0, height: 470 }, 1000);
            }
           
        }

       
       


</script>


   
<script type="text/javascript">
    //Refresh page if user hit back button
    onload = function () {
        var e = document.getElementById("refreshed");
        if (e.value == "no") e.value = "yes";
        else { e.value = "no"; location.reload(); }
    }
</script>


    }